<template>
  <layout>
    <template #header>
      <pageHead :title="title" />
    </template>
    <view class="content">
      <!-- <view @click="toDetail(i)" class="item flex flex-bt" v-for="i in 20" :key="i">
                <view>
                    <view class="ellipsis-2 fs-32 c-90">这里是公告标题这里是公告标题这里是公告标题这里是公告标题这里是公告标题这里是公告标题这里是公告标题这里是公告标题这里是公告标题这里是公告标题这里是公告标题这里是公告标题</view>
                    <view class="im fs-28 c-60">立即查看</view>
                </view>
                <image src="../../assets/images/logo.png"></image>
            </view> -->
      <view class="test" v-if="title == '使用教程'">
        <image src="../../assets/images/ios-test/1.jpg" />
        <text
          >在首页爆剧推荐，可以看到爆款短剧的热榜，在热榜内的短剧都为精选的近期热剧，质量较高。</text
        >
        <image src="../../assets/images/ios-test/2.jpg" mode="scaleToFill" />
        <text>在数据统览内，可查询所有关注的短剧数据，实时查询数据</text>
      </view>
      <view class="test" v-if="title == '爆款推荐'">
        <image
            src="../../assets/images/ios-test/4.jpg"
            mode="scaleToFill"
            class="hh"
        />
    </view>
      <view class="test" v-if="title == '每日推荐'">
        <image
            src="../../assets/images/ios-test/3.jpg"
            mode="scaleToFill"
            class="h"
        />
    </view>
    </view>
  </layout>
</template>
<script>
import layout from "../../compennts/layout/index.vue";
import pageHead from "../../compennts/pageHead/index.vue";
export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      title: "新人必读",
    };
  },
  onLoad(opt) {
    console.log(opt);
    this.title = opt.title;
  },
  methods: {
    toDetail(id) {
      uni.navigateTo({
        url: `/pages/mine/message/detail?id=${id}`,
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/styles/common.less");
.content {
  padding: 32rpx;
  height: 100%;
  overflow: scroll;
  .item {
    padding: 32rpx;
    border-radius: 16rpx;
    background: #ffffff;
    margin-bottom: 32rpx;
    &:nth-last-child(1) {
      margin: 0;
    }
    .im {
      margin-top: 24rpx;
    }
    image {
      width: 240rpx;
      height: 180rpx;
      flex-shrink: 0;
      margin-left: 32rpx;
    }
  }
  .test {
    display: flex;
    flex-direction: column;
    align-items: center;
    text {
      width: 600rpx;
    }
    image {
      width: 600rpx;
      height: 1231rpx;
      margin: 20rpx auto;
    }
    .h{
        height: 1658rpx;
    }
    .hh{
        height: 1561rpx;
    }
  }
}
</style>
